<template>
  <x-sub-page :isFixBtn="true">
    <div class="quotation-detail">
      <div class="left-content">
        <div class="left-content-title">询价物料清单</div>
        <el-card
          class="box-card"
          v-for="(item, idx) in materialList"
          :key="item.id"
          :class="[idx === selectedIndex ? 'selected-card' : '']"
        >
          <div @click="handleCardSelect(idx)">
            <div class="title" :title="item.materialName">{{ item.materialName | emptyVal }}</div>
            <div class="txt">物料编码：{{ item.materialCode | emptyVal }}</div>
            <div class="txt">数量：{{ item.quantity | emptyVal }}</div>
            <div class="txt">交付日期：{{ item.deliveryDate | emptyVal }}</div>
            <div class="txt">交付地点：{{ item.deliveryAddr | emptyVal }}</div>
          </div>
        </el-card>
      </div>
      <div class="right-content">
        <div class="form-components">
          <div class="panl-title">
            <span>物料信息</span>
          </div>
          <el-descriptions
            direction="vertical"
            :column="3"
            label-class-name="title-style"
            content-class-name="content-style"
          >
            <el-descriptions-item label="物料编码">{{ selectedInfo.materialCode | emptyVal }}</el-descriptions-item>
            <el-descriptions-item label="物料名称">{{ selectedInfo.materialName | emptyVal }}</el-descriptions-item>
            <el-descriptions-item label="物料规格">{{ selectedInfo.materialSpecs | emptyVal }}</el-descriptions-item>
            <el-descriptions-item label="物料分类">{{ selectedInfo.materialType | emptyVal }}</el-descriptions-item>
            <el-descriptions-item label="单位"
              >{{ selectDictLabel(dictOptions['srm_material.material_unit'], selectedInfo.materialUnit) | emptyVal }}
            </el-descriptions-item>
            <el-descriptions-item label="数量">{{ selectedInfo.quantity | emptyVal }}</el-descriptions-item>
            <el-descriptions-item label="参考单价/元">{{ selectedInfo.quotation | emptyVal }}</el-descriptions-item>
            <el-descriptions-item label="税率/%">{{ selectedInfo.taxRate | emptyVal }}</el-descriptions-item>
            <el-descriptions-item label="期望交货日期">{{ selectedInfo.deliveryDate | emptyVal }}</el-descriptions-item>
            <el-descriptions-item label="交付地点">{{ selectedInfo.deliveryAddr | emptyVal }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="form-components">
          <div class="panl-title">
            <span>报价信息</span>
          </div>
        </div>
        <x-table
          ref="tableCom"
          :isPagination="false"
          :data-source="selectedInfo.enquiryQuoteVoList"
          :row-key="'id'"
          :height="tableHeight"
        >
          <el-table-column
            v-for="(item, index) in quotationColumns"
            :key="index"
            :prop="item.prop"
            :fixed="item.fixed"
            :show-overflow-tooltip="true"
            :width="item.width"
            :min-width="item.minWidth || '-'"
            :label="item.label"
            :sortable="'custom'"
          >
            <template #default="scope">
              <span v-if="item.prop === 'state'">
                {{ selectDictLabel(dictOptions['srm_purchase_detail.state'], scope.row[item.prop]) }}
              </span>
              <span v-else-if="item.prop === 'materialUnit'">{{
                selectDictLabel(dictOptions['srm_material.material_unit'], scope.row[item.prop])
              }}</span>
              <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
            </template>
          </el-table-column>
        </x-table>
      </div>
    </div>
    <fixed-btn-area>
      <el-button @click="handleBack"> 返回 </el-button>
    </fixed-btn-area>
  </x-sub-page>
</template>

<script>
  import { PermissionsMixin, QueryDictMixin, selectDictLabel } from '@package/utils'
  import { apiGetMaterialQutes } from '@/modules/purchaseSearchSource/api/enquiry.js'
  import { quotationColumns } from '@/modules/purchaseSearchSource/config/enquiry.js'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'QuotationDetail',
    mixins: [PermissionsMixin, QueryDictMixin],
    inject: ['closePages'],
    data() {
      return {
        pageLoading: false,
        quotationColumns,
        srmDictKeys: ['srm_purchase_detail.state', 'srm_purchase.type', 'srm_material.material_unit'],
        materialList: [{}], // 物料列表
        selectedIndex: 0 // 当前选中卡片的索引
      }
    },
    computed: {
      selectedInfo() {
        return this.materialList[this.selectedIndex] || { enquiryQuoteVoList: [] }
      },
      tableHeight() {
        return (this.selectedInfo?.enquiryQuoteVoList?.length || 1) * 42 + 37
      }
    },
    watch: {},
    mounted() {
      const {
        query: { id }
      } = this.$route
      this.getInfo(id)
      this.initDictConfig()
    },
    methods: {
      selectDictLabel,
      // 获取详情
      async getInfo(id) {
        const { data, code } = await apiGetMaterialQutes(id)
        if (code === EnumApiCode.Success) {
          this.$nextTick(() => {
            this.materialList = data
          })
        }
      },
      // 卡片切换
      handleCardSelect(idx) {
        this.selectedIndex = idx
      },
      handleBack() {
        this.$router.go(-1)
        this.closePages()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .quotation-detail {
    display: flex;
    .left-content {
      padding: 16px;
      width: 300px;
      border-right: 1px solid #eee;
      // margin-right: 20px;
      .left-content-title {
        height: 22px;
        line-height: 22px;
        color: #171c26;
        font-size: 16px;
        font-weight: 700;
      }
      .box-card {
        margin-top: 10px;
        cursor: pointer;
        .title {
          height: 22px;
          line-height: 22px;
          color: #171c26;
          font-size: 16px;
          font-weight: 700;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100%;
        }
        .txt {
          margin-top: 6px;
        }
      }
      .selected-card {
        background: #dfe7f7;
      }
    }
    .right-content {
      flex: 1;
      padding: 16px;
    }

    .panl-title {
      height: 45px;
      // margin: 0 16px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ededed;
      margin-bottom: 16px;
      span {
        display: inline-block;
        height: 22px;
        line-height: 22px;
        color: #171c26;
        border-left: 2px solid #4474f6;
        padding-left: 12px;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }
</style>
